<template>
    <div class="live-box">
      {{userName}}
      {{userId}}
        <p>房间号：{{liveForm.roomNum}}</p>
        <!-- {{liveForm.roomNum}} -->
        <div id="dplayer"></div>
        <div class="chatwin-box">
            <div v-html="htmlContent">
            </div>
            <div class="send-message-box">
                <!-- <el-input type="textarea" v-model="messageContent"></el-input>
                <el-button @click="sendMessage" type="success">发送</el-button> -->
            </div>
        </div>
    </div>
</template>

<script>
import Hls from 'hls.js'
export default {
  data () {
    return {
      liveForm: {
        id: '',
        // 播流路径
        playUrl: '',
        socket: null
      },
      // 当前登录的用户名
      userName: '',
      // 当前登录的用户id
      userId: '',
      // 消息窗口 的消息内容
      messageContent: '',
      // 消息样式
      htmlContent: '',
      dp: null
    }
  },
  // watch: {
  //   liveForm (newData) {
  //     console.log(newData)
  //     if (newData.roomNum !== '') {
  //       this.$nextTick().then(() => {
  //         this.webs()
  //       })
  //     }
  //   }
  // },
  mounted () {
    this.userName = window.sessionStorage.getItem('userName')
    this.userId = window.sessionStorage.getItem('id')
    this.liveForm.id = this.$route.query.id
    this.getLiveById()
  },
  methods: {
    // // 发送消息
    // sendMessage () {
    //   this.socket.send(this.messageContent)
    //   this.messageContent = ''
    // },
    // // 创建对话
    // webs () {
    //   this.socket = new WebSocket('ws://localhost:15000/eat-service/livechat/' + this.userName + '/' + this.userId + '/' + this.liveForm.roomNum)
    //   // 打开socket

    //   this.socket.onopen = function () {
    //     console.log('open success')
    //   }

    //   const that = this
    //   // 接收到消息的回调方法
    //   this.socket.onmessage = function (msg) {
    //     const data = JSON.parse(msg.data)
    //     let html = ''
    //     if (data.roomNum === that.liveForm.roomNum) {
    //       html = '<p><span style="font-weight: bold">' + data.username + '：</span>' + data.message + '</p>'
    //       const danmaku = {
    //         text: data.message,
    //         color: '#fff',
    //         type: 'right'
    //       }
    //       that.dp.danmaku.draw(danmaku)
    //     }
    //     that.htmlContent += html
    //   }

    //   // 连接关闭的回调方法
    //   this.socket.onclose = function () {
    //     console.log('close')
    //   }
    // },
    // 根据id获取直播间 信息
    getLiveById () {
      this.$axios.get('/live/getLiveById', {
        params: {
          id: this.liveForm.id
        }
      }).then(res => {
        this.liveForm = res.data.data
        if (this.liveForm) {
          this.player()
        }
      })
    },
    player () {
      const that = this
      this.dp = new this.$dPlayer({
        container: document.getElementById('dplayer'),
        live: true,
        danmaku: true,
        apiBackend: {
          read: function (options) {
            console.log('Pretend to connect WebSocket')
            options.success([])
          },
          send: function (options) {
            console.log('Pretend to send danmaku via WebSocket', options.data)
            that.messageContent = options.data.text
            that.sendMessage()
            options.success()
          }
        },
        video: {
          url: this.liveForm.livePlayUrl,
          type: 'customHls',
          customType: {
            customHls: function (video, player) {
              const hls = new Hls()
              hls.loadSource(video.src)
              hls.attachMedia(video)
            }
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.live-box{
    width: 100%;
    height: 530px;
}
.live-box #dplayer{
    width: 70%;
    float:left;
}
.chatwin-box{
    width: 30%;
    height: 100%;
    float:left;
    background-color: gray;
    position: relative;
}
.send-message-box{
    width:100%;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
}
</style>
